<template>
    <p>这是一个组件</p>
     <p>这是一个组件</p>
    <p>{{msg}}</p>

    <p v-html="htmlSpan"></p>

    <img src="//www.baidu.com/img/baidu_sylogo1.gif">

    <img v-bind:src="imgurl" alt="">

    <p :style="stylrstr">这是一个样式</p>

    <button v-on:click="btnAction">点击</button>
    <button @click="btnAction">点击（简写）</button>

    <p>v-if</p>
    <p v-if="isAction">v-if true</p>
    <p v-else>v-else false</p>
    <p v-show="isAction">v-show</p>
    <button @click="switchAction">切换状态</button>

    <p v-if="num==0">num为0</p>
    <p v-else-if="num==1">num为1</p>
    <p v-else>num真的不知道</p>
    <button @click="chargeNum(0)">num为0</button>
    <button @click="chargeNum(1)">num为1</button>
    <button @click="chargeNum()">num真的不知道</button>

    <h1>遍历数组</h1>
    <p v-for="item,index in arr" >item的值是{{item}},index的值是{{index}}</p>
    <h1>遍历对象</h1>
    <p v-for="(value,name,index) in obj">
        value的值是{{value}},name的值是{{name}},index的值是{{index}}
    </p>
    <h2>配置信息</h2>
    <div>
        <label for="">昵称：</label>
        <input type="text" v-model="user.name">
    </div>
        <div>
        <label for="">性别：</label>
        <input type="radio" name="sex" v-model="user.sex" value="男">男
        <input type="radio" name="sex" v-model="user.sex" value="女">女
    </div>
    <div>
        <label>心愿单：</label>
        <input type="checkbox" name="wish" v-model="user.wish" value="iphone">iphone
        <input type="checkbox" name="wish" v-model="user.wish" value="ipad">ipad
        <input type="checkbox" name="wish" v-model="user.wish" value="iwatch">iwatch
        <input type="checkbox" name="wish" v-model="user.wish" value="其他">其他
    </div>
    <div>
        <label for="">组号</label>
        <select v-model="user.group" style="width:100px ">
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
         </select>
    </div>
    <div>
        <label for="">备注：</label>
        <textarea  v-model="user.remark" name="" id="" cols="30" rows="10"></textarea>
    </div>
    <div>
       <p>昵称：{{user.name}}</p>
       <p>性别：{{user.sex}}</p>
       <p>组号：{{user.group}}</p>
    </div>
</template>

<script>
export default {
 data(){
        return{
            mag:"hello world",
            htmlSpan:"<span>这是一个span标签</span>",
            imgurl:"//www.baidu.com/img/baidu_sylogo1.gif",
            stylrstr:"color:red;",
            isAction:true,
            num:0,
            arr:[5,4,3,2,1,0],
            obj:{a:1,
                 b:2,
                 c:3,
                 d:4                 
            },
            user:{
                name:'',
                sex:'男',
                wish:[],
                group:'',
                remark:''
            }

        }
    },
    methods:{
        btnAction(){
            console.log(123);
        },
        switchAction(){
            this.isAction= !this.isAction
            console.log("this.isAction",this.isAction);
        },
        chargeNum(number){
            this.num=number;
        }
    }
}
</script>